import React,{Component}   from 'react';

// 父子通信
/**
 * 父组件不仅能向自组件传递 数据还能向子组件传递函数, 父组件的状态值更新 传到子组件的页面也会重新渲染
 * 子组件通过 父组件传的函数调用父组件的函数,从而实现 父子组件之间的通信
 */
class App extends Component {
  state = {
    name: "小明",
  };

  handleEvent = (name) => {
    this.setState({
      name
    });
    // console.log("父组件定义的event事件")
  };
  render() {
    return (
      <div>
        <div>
          <span>父组件姓名:</span>
          {this.state.name}
        </div>
        <button onClick={()=>{
            this.setState({
              name:'小红'
            })
        }}> 父组件按钮 </button>
        {/**
         * 父组件不仅能向自组件传递 数据还能向子组件传递函数, 父组件的状态值更新 传到子组件的页面也会重新渲染
         * 子组件通过 父组件传的函数调用父组件的函数,从而实现 父子组件之间的通信
         */}
        <Item handleEvent={this.handleEvent}  name={this.state.name} />
      
      </div>
    );
  }
}

//子组件
class Item extends Component {
  render() {
    return (
      <div >

        <div>
          <span>子组件姓名:</span>
          {this.props.name}
        </div>
        <button
          onClick={() => {
            console.log("子通知父， 修改 父组件name 值!");
            this.props.handleEvent("小王"); //调用父组件传来啊的回调函数
          }}
        >
          子组件间click
        </button>
        <span>子组件</span>
      </div>
    );
  }
}




export default App;